<style type="text/css"> 
  input[type=checkbox]
{
 /* Double-sized Checkboxes */
 -ms-transform: scale(0.5); /* IE */
 -moz-transform: scale(0.5); /* FF */
 -webkit-transform: scale(0.5); /* Safari and Chrome */
 -o-transform: scale(0.5); /* Opera */
 padding: 10px;
}
</style>
<div id="loader" class="container">
	<div id="loaders" class="col-md-offset-1">
		<div class="col-md-11">
			<ul class="nav nav-tabs nav-justified">
			  <li class="active"><a href="#home" data-toggle="tab">In House</a></li>
			  <li><a href="#other" data-toggle="tab">Other Location</a></li>
			</ul>
			<div class="tab-content">
				<div class="tab-pane active" id="home">
					<form class="form-horizontal" role="form" method="post" name="room_list" action="">
					<div class="panel panel-default">
						<div class="panel-heading">
							<h4 class="panel-title"><b class="caret"></b><b> Search By</b></h4>
						</div>
						<div class="panel-body">
							<div class="col-xs-12 col-md-6">
								<div class="form-group">
									<label class="control-label col-md-5"> Meeting Room<span style="color:red;">*</span></label>
									<div class="col-md-6">
										<select class="form-control input-sm select2" id="room_select">
											<option value="0">Select Room</option>
											<?php
											foreach($room_select as $room_select)
											{
												echo '<option value="'.$room_select['MST_CATEGORY_ID'].'_'.$room_select['MST_FLOOR_ID'].'_'.$room_select['MST_CATEGORY_DESC'].'">'.
													  $room_select['MST_CATEGORY_DESC'].'</option>';
											}
											?>
										</select>
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-5"> Meeting Date<span style="color:red;">*</span></label>
									<div class="col-md-5">
										<input type="text" class="form-control input-sm" required="required" name="G_Date1" id="G_Date1" value="<?php echo $dtNow; ?>">
									</div>										
								</div>
							</div>
							<div class="col-sm-6 col-md-6">
								<div id="det_room">														
									<div class="form-group">
										<label class="control-label col-md-4"> Capacity</label>
										<div class="col-md-3"><input type="text" class="form-control input-sm" id="capacity" name="capacity" disabled="disabled"></div>
										<div class="col-md-1">Seat</div>
									</div>
									<div class="form-group" style="padding-bottom:10px">
										<label class="control-label col-md-4"> Floor</label>
										<div class="col-md-2">
											<input type="text" class="form-control input-sm" id="floor" name="floor" disabled="disabled">
										</div>
										<div class="col-md-3">
											<button type="button" class="btn btn-primary btn-sm" onclick="search_data();">Search</button>											
										</div>
									</div>
								</div>
							</div>
							
							<div id="s_room">
								<div class="col-sm-7">
								<!--div class="col-sm-2" style="padding-right:0px"-->
									<div style="display:inline-table; width:100%;">
										<table class="table table-bordered table-condensed table-striped">
											<thead><tr><th class="tblhead" style="width:20%;text-align:center">Time Meeting</th><!--/tr></thead-->
											<!--tbody><tr><td style="text-align:center">No Data Available</td></tr></tbody>
										</table>
									</div>
								</div-->
								<!--div class="col-sm-5" style="padding-left:0px">
									<div style="display:inline-table; margin-right:26px; width:100%">
										<table class="table table-bordered table-condensed table-striped">
											<thead>
												<tr-->
													<th class="tblhead" style="width:70%;text-align:center">Information</th>
													<!--th class="tblhead" style="width:30%;text-align:center">Action</th-->
												</tr>
											</thead>
											<tbody>
												<tr>
													<td style="text-align:center" colspan="2">No Data Available</td>
													<!--td style="text-align:center"><button type="button" class="btn btn-default btn-sm" >No Action</button></td-->
												</tr>
											</tbody>
										</table>
									</div>
								</div>
								<div class="col-sm-4">
									<div style="display:inline-table; width:100%">
										<table class="table table-bordered table-condensed table-striped">
											<thead>
												<tr>
													<th class="tblhead" style="width:10%;text-align:center">No</th>
													<th class="tblhead" style="width:100%;text-align:center">Item Name</th>
												</tr>
											</thead>
											<tbody><tr><td colspan="2" style="text-align:center">No Data Available</td></tr></tbody>
										</table>
									</div>
								</div>
							</div>							
						</div>
					</div>
					</form>
				</div>	
				<div class="tab-pane" id="other">
					<form class="form-horizontal" role="form" method="post" name="room_add" action="" id="formuser" onsubmit="return cekDulu(this);">
					<!-- Edit by Surya Alam Gultom ~ before action="< ?php echo site_url('public_room/id_card/save');?>" -->					
						<div class="panel panel-default">
							<div class="panel-heading"><h4 class="panel-title"><b class="caret"></b><b> Request By</b></h4></div>
							<div class="panel-body">
								<div class="col-xs-12 col-md-6">
									<div class="form-group">
										<label class="control-label col-md-4">Name<span style="color:red;">*</span></label>
										<div class="col-md-7"><input type="text" value="" id="r_name" class="select2 form-control input-sm"></div>
									</div>					
									<div class="form-group">
										<label class="control-label col-md-4">ID Number</label>
										<div class="col-md-4">
										<input type="text" value="" id="r_id" class="form-control input-sm" disabled="disabled"/> 
										<!-- Edit by Surya Alam Gultom ~ before id="r_nik" -->
										</div> 
									</div>
									<div class="form-group">
										<label class="control-label col-md-4">Manager</label>
										<div class="col-md-7">
										<input type="text" value="" id="r_mgr" class="form-control input-sm" disabled="disabled"/>
										<!-- Edit by Surya Alam Gultom ~ before id="r_manager" -->
										</div>
									</div>
								</div>
								<div class="col-sm-6 col-md-6">
									<div class="form-group">
										<label class="control-label col-md-4">Departement</label>
										<div class="col-md-7">
										<input type="text" value="" id="r_dept" class="form-control input-sm" disabled="disabled"/>
										<!-- Edit by Surya Alam Gultom ~ before id="r_department" -->
										</div>
									</div>
									<div class="form-group">
										<label class="control-label col-md-4">Job Position</label>
										<div class="col-md-8">
										<input type="text" value="" id="r_job" class="form-control input-sm" disabled="disabled"/>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="panel panel-default">
							<div class="panel-heading"><h4 class="panel-title"><b class="caret"></b><b> Form</b></h4></div>
							<div class="panel-body">
								<div class="col-sm-6 col-md-6">
									<div class="form-group">
										<label class="control-label col-md-4">Date<span style="color:red;">*</span></label>
										<div class="col-md-6">
											<div class="input-group">
												<span class="input-group-addon"><small>From</small></span>
												<input type="text" class="form-control input-sm" autocomplete="off" name="G_Date2" id="G_Date2" value="<?php echo $dtNow?>">
											</div>
										</div>
									</div>
									<div class="form-group">
										<label class="control-label col-md-4"></label>
										<div class="col-md-6">
											<div class="input-group">
												<span class="input-group-addon"><small>To</small></span>
												<input type="text" class="form-control input-sm" autocomplete="off" name="G_Date3" id="G_Date3" value="<?php echo $dtNow?>">
											</div>
										</div>
									</div>
									<div class="form-group">
										<label class="control-label col-md-4">Time<span style="color:red;">*</span></label>
										<div class="col-md-6">
											<div class="input-group">
												<span class="input-group-addon"><small>From</small></span>										
												<input type="text" class="form-control input-sm" autocomplete="off" id="G_Time4" name="G_Time4" value="07:00">
											</div>
										</div>
									</div>
									<div class="form-group">
										<label class="control-label col-md-4"></label>
										<div class="col-md-6">
											<div class="input-group">
												<span class="input-group-addon"><small>To</small></span>										
												<input type="text" class="form-control input-sm" autocomplete="off" id="G_Time5" name="G_Time5" value="07:00">
											</div>
										</div>
									</div>
									<div class="form-group">
										<label class="control-label col-md-4">Location<span style="color:red;">*</span></label>
										<div class="col-md-6"><input type="text" class="form-control input-sm" id="location" name="location"/></div>
										<!--revisi by Surya Alam Gultom - Rabu, 22 Juli 2014 3:25 PM -->
									</div>
									<div class="form-group">
										<label class="control-label col-md-4">Agenda<span style="color:red;">*</span></label>
										<div class="col-md-6">
										<textarea id="agenda" name="agenda" class="form-control input-sm" style="min-width:190px;max-width:200px;min-height:100px;max-height:200px;"></textarea>						
										<!--revisi by Surya Alam Gultom - Rabu, 22 Juli 2014 3:25 PM -->
										</div>
									</div>
								</div>
								<div class="col-sm-6 col-md-6">
									<div class="form-group">
										<label class="col-md-4"><p class="text-left">Participant<span style="color:red;">*</span></p></label>
										<div class="col-md-2"><input type="text" class="form-control input-sm" id="Other_Partis" name="Other_Partis" /></div>
										<div class="col-md-5">(Jumlah Peserta)</div>
									</div>
									<div class="form-group">
										<label class="col-md-6"><p class="text-left">Food And Beverage</p></label>
										<div class="col-md-5"><input type="text" class="form-control input-sm" name="food" id="food" /></div>
										<!--revisi by Surya Alam Gultom - Rabu, 22 Juli 2014 3:25 PM -->
									</div>
								</div>
								<div class="col-sm-6 col-md-6">
									<table class="table table-bordered table-condensed table-striped">
										<thead>
											<tr>
												<th class="tblhead" style="width:5%;text-align:center">Checklist</th>
												<th class="tblhead" style="width:30%;text-align:center">Item Name</th>
												<th class="tblhead" style="width:25%;text-align:center">Total Reservation</th>									
											</tr>
										</thead>
										<tbody>
										
										<?php
											if (empty($list_data_item)) {	//tambahan by Surya Alam Gultom - Jumat, 4 Juli 2014 10:59 AM
										?>
												<tr><td colspan="3" style="text-align:center">No Data Available</td></tr>																			
										<?php 	
											} else if (!empty($list_data_item)) {
												$no_urut = 0;
										?>			
												<input type="hidden" class="form-control input-sm" id="count_data" value="<?php echo $count_data; ?>">							
											<?php 	
												foreach ($list_data_item as $row) {
													$no_urut++;
											?>
												<tr>
													<td style="text-align:center">
														<input id="checkbox<?php echo $no_urut; ?>" name="checkbox" type="checkbox" class="form-control input-sm"/>
														<input type="hidden" class="form-control input-sm" id="warehouse_id<?php echo $no_urut; ?>" value="<?php echo $row['WAREHOUSE_ID']; ?>">
													</td>
													<td style="text-align:left;">
														<?php echo $row['WAREHOUSE_ITEM_NAME']; ?>
														<input type="hidden" class="form-control input-sm" id="warehouse_item_name<?php echo $no_urut; ?>" value="<?php echo $row['WAREHOUSE_ITEM_NAME']; ?>">
													</td>
													<td>
														<input type="text" class="form-control input-sm" id="total_reservation<?php echo $no_urut; ?>" value="">
													</td>
												</tr>
												
											<?php 	
												} ?>
												<input type="hidden" class="form-control input-sm" id="no_urut" name="no_urut" value="<?php echo $no_urut; ?>"> 
											<?php 
											}
										?>			
																				
											<tr>
												<td style="padding-top:3px;text-align:right;">
													<!--table width="100%" cellpadding="0" cellspacing="0" border="0" style="background:#fff;border:1px solid #ccc;">
														<tr>
															<td style="padding:5px 0 5px 10px;"-->Other&nbsp;:&nbsp;</td>
															<td style="padding:5px 0 5px 10px;" colspan="2">
															<input id="other_item" name="other_item" type="text" value="" class="form-control input-sm" style="border:none;" /><!--/td-->
														</tr>
													</table>
												</td>
											</tr>
																											
										</tbody>
									</table>
								</div>
								<div class="col-md-11">
									<div class="form-group" style="text-align:center">
										<!--input type="submit" value="Save This Form" name="submit" class="btn btn-success btn-md"/-->
										<button type="button" class="btn btn-success btn-md" onclick="cekDulu();">Save This Form</button>
									</div>
								</div>							
							</div>						
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
		
<script type="text/javascript">
	$.validator.setDefaults({
        submitHandler: function() {
            $.post("<?= site_url() ?>public_room/insert_reservasi", function(data) {
				$('#loader').html(data);
			});
        }
    });

    $(document).ready(function() {
      	$('#room_select').select2({
	  		placeholder: "Select room type",
	  		allowClear: true
		});
		
		$("#formuser").keypress(function(e) {
            if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
                $.validator.setDefaults({
                    submitHandler: function() {
                        $.post("<?= site_url() ?>public_room/insert_reservasi", function(data) {
							$('#loader').html(data);
						});
                    }
                });
            }
        });

        $("#formuser").validate();
    });
	
	$("#room_select").change(function()
	{
		var DataString = {room_select:$("#room_select").val()};
		$.ajax({
				type: "POST",
				url : "<?php echo site_url('public_room/showAll')?>",
				data: DataString,
				success: function(data)
				{
					$('#det_room').html(data);
				}
			});
	});
	
	function search_data() {
		$room_select   = $('#room_select').val();
		if ($room_select==="0"){$room_select="";}
		if ($room_select===""){
			alert('Meeting Room tidak boleh kosong!'); 
			frm.elements['room_select'].focus(); 
			return false;
		}
		
        $.post("<?= site_url() ?>public_room/showRoom", {
            room_select: $('#room_select').val(),
            date_select: $('#G_Date1').val() 
        },
        function(data) {
            $('#s_room').html(data);
        });		
    }
	
	function cekDulu() {                    <!--tambahan by Surya Alam Gultom - Rabu, 22 Juli 2014 3:25 PM | Edited Kamis, 21 Agustus 2014 12:31 PM -->
        $r_name   = $('#r_name').val();
		if ($r_name==="0"){$r_name="";}
		if ($r_name===""){alert('Requestor Name tidak boleh kosong!'); document.getElementById('r_name').focus(); return false;}
		
		/*
		$location = $('#location').val();
		if ($location===""){alert('Location tidak boleh kosong!'); document.getElementById('location').focus(); return false;}		
		*/
		
		if (document.getElementById('location').value.length==0) { //document.getElementById('location') = frm.elements['location']
			alert('Location tidak boleh kosong!');
			document.getElementById('location').focus();
			return false;
		}
		
		$agenda = $('#agenda').val();
		if ($agenda===""){alert('Agenda tidak boleh kosong!'); document.getElementById('agenda').focus(); return false;}		
		
		$partis = $('#Other_Partis').val(); 
		if ($partis===""){alert('Participant tidak boleh kosong!'); document.getElementById('Other_Partis').focus(); return false;}
		
		$time1 = $('#G_Time4').val();
		$time2 = $('#G_Time5').val(); 
		if ($time1===$time2){alert('Jam Awal dan Jam Akhir, tidak boleh sama!'); document.getElementById('G_Time5').focus(); return false;}
		
		var df0=document.getElementById('G_Date2').value.split("/")[0];
		var mf0=(document.getElementById('G_Date2').value.split("/")[1])-1;
		var yf0=document.getElementById('G_Date2').value.split("/")[2];
		
		$mf0 = parseInt(mf0)+10;
		mf0 = $mf0.toString();
		
		$tglawal=yf0+mf0+df0;
		
		var df1=document.getElementById('G_Date3').value.split("/")[0];
		var mf1=(document.getElementById('G_Date3').value.split("/")[1])-1;
		var yf1=document.getElementById('G_Date2').value.split("/")[2];
		
		$mf1 = parseInt(mf1)+10;
		mf1 = $mf1.toString();
		
		$tglakhir=yf1+mf1+df1;
		
		if ($tglakhir < $tglawal) {
			alert('Tanggal Awal lebih dari Tanggal Akhir!');
			document.getElementById('G_Date2').focus(); 
			return false;
		}
		
		$count_data = $('#count_data').val();
		
		for (i=1; i<$count_data+1; i++) {
			var x = document.getElementById('checkbox'+i).checked;
			if(x==1){
				var y = document.getElementById('total_reservation'+i).value.length;
				if(y==0){
					alert('Item list yang di-check harus diisi jumlahnya');
					document.getElementById('total_reservation'+i).focus();
					return false;
				} else {
				
					var DataString = { 
						r_id	:	$("#r_id").val(), 
						r_name	:	$("#r_name").val(), 
						r_mgr	:	$("#r_mgr").val(), 
						r_dept	:	$("#r_dept").val(), 
						r_job	:	$("#r_job").val(), 
						date1	:	$("#G_Date2").val(), 
						date2	:	$("#G_Date3").val(), 
						time1	:	$("#G_Time4").val(), 
						time2	:	$("#G_Time5").val(), 
						lokasi	:	$("#location").val(), 
						agenda	:	$("#agenda").val(), 
						other	:	$("#Other_Partis").val(), 
						no_urut	:	$("#no_urut").val(), 
						other_item	:	$("#other_item").val(), 
						//total_reservation1~3
					};
					$.ajax({
							type: "POST",
							url : "<?php echo site_url('public_room/insert_reservasi')?>",
							data: DataString,
							success: function(data)
							{
								$('#loader').html(data);
							}
					});	
				}
				
			} else {
				if(i==$count_data){
					$.post("<?= site_url() ?>public_room/insert_reservasi",
					function(data) {
						$('#loaders').html(data);
					});
				}
			}
		}						
	}
	
	function add_status()
	{
		var DataString = {room_select:$("#room_select").val()};
		$.ajax({
				type: "POST",
				url : "<?php echo site_url('public_room/add_room')?>",
				data: DataString,
				success: function(data)
				{
					$('#loader').html(data);
				}
		});
	}
</script>
